import React, { useState, useRef, useEffect } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { IMPORT_MAP_FILE_NAME ,ENTRY_FILE_NAME} from '../../../ReactPlayground/files'
interface FileNameItemProps {
    onClick: () => void,
    value: string,
    actived: boolean,
    onEditComplete: (name: string) => void,
    creating: boolean,
    onRemove: (e: React.MouseEvent) => void,
}
export default function FileNameItem(props: FileNameItemProps) {
    const { onClick, value, actived = false, onEditComplete, creating, onRemove } = props
    const [name, setName] = useState(value)
    const [editing, setEditing] = useState(false)//是否正在编辑,用于设置是否input框
    const inputRef = useRef<HTMLInputElement>(null)
    useEffect(() => {
        setName(value)
    }, [value])
    const handleDoubleClick = () => {
        setEditing(true)
        setTimeout(() => {
            inputRef.current?.focus()
        }, 0)
    }
    useEffect(() => {
        if (creating) {//如果为创建的新组件，则聚焦到input框
            inputRef.current?.focus()
        }
    }, [creating])
    return (
        <div
            className={classnames(styles['tab-item'], actived ? styles.actived : null)}
            onClick={onClick}
        >
            {
                editing ? (
                    <input type="text" ref={inputRef}
                        className={styles['tabs-item-input']}
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        onBlur={() => {
                            setEditing(false)
                            onEditComplete(name)
                        }}
                    />

                ) : (
                    name === IMPORT_MAP_FILE_NAME || name === ENTRY_FILE_NAME ? (
                        <span onDoubleClick={handleDoubleClick}>{name}</span>
                    ) : (
                        <>
                            <span onDoubleClick={handleDoubleClick}>{name}</span>
                            <span style={{ marginLeft: 5, display: 'flex' }} onClick={onRemove}>
                                <svg width='12' height='12' viewBox='0 0 24 24'>
                                    <line stroke='#999' x1='18' y1='6' x2='6' y2='18'></line>
                                    <line stroke='#999' x1='6' y1='6' x2='18' y2='18'></line>
                                </svg>
                            </span>
                        </>
                    )
                )
            }

        </div>
    )
}
